<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    *{box-sizing: border-box;}
    .box{display: flex;align-items: center;margin:0 auto;border:#000 1px solid;height:auto}
    .box div.pt{background:#0bb20c;display:inline-block;flex-grow:1;height:100px;}
    .box div.red{background:red;flex-grow:2;height:100px;}

    .demo4{
          display: flex;
          /*项目拉伸对齐，也就是所左边的高度为拉伸到和右边等高，默认是拉伸的*/
       /*align-items: stretch;*/
       }
    .demo4 .left{

                     /*左边固定宽度，必须设置其最小宽度和最大宽度*/
                     width: 200px;
             min-width: 200px;
             max-width: 200px;

                     /*高度自由分配*/

                     height:auto;

                     background-color: #333;
             color:#fff;

                     /*空白区域分配比例为0（作用于项目）*/

                     flex-grow:0;

                 }

     .demo4 .right{
                 margin-left: 10px;
                 width:auto;
                 height:200px;
                 background-color: #333;
                 color:#fff;
                 /*空白区域分配比例为1（作用于项目）
159     左右得到的空白比例为0:1，所以右边会分配到剩余的所有空白区域，
160     左边成固定的宽度，右边为自适应宽度*/
                         flex-grow: 1;


                     }
</style>
    <div class="box">
            <div class="pt">1</div>
            <div class="pt">2</div>
            <div class="red">3</div>
    </div>

<div class="wrap">

    <div class="demo4">
        <div class="left">左边固定宽度为100px，这里设置了高度为auto</div>
        <div class="right">右边宽度自适应，并且左右两个区域是等高的，这里设置了高度为200px</div>
    </div>

</div>
</body>
</html>